<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title></title>

  <link rel="stylesheet" type="text/css" href="/xuanzuo/css/style.css"/>

  <script type="text/javascript" src="/xuanzuo/js/jquery-1.7.min.js"></script>

  <script type="text/javascript">
    $(function () {
      /*============================
      @author:flc
      @time:2014-02-11 18:16:09
      @qq:3407725
      ============================*/
      $(".select").each(function () {
        var s = $(this);
        var z = parseInt(s.css("z-index"));
        var dt = $(this).children("dt");
        var dd = $(this).children("dd");

        dt.click(function () {
          dd.is(":hidden") ? _show() : _hide();
        });
        dd.find("a").click(function () {
          if ($(this).parent().hasClass('unavailable')) {
            $("#cId").val("")
            dt.html('床位：');
          } else {
            $("#cId").val("")
            $("#cId").val($(this).prev("#chuangWeiId").val())
            $("li a").removeClass("cur");
            $(this).addClass("cur");
            dt.html('床位：' + $(this).attr('rows') + '楼' + $(this).html() + '房间');
            _show();
          }



        });

        //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
        $("body").click(function (i) {
          !$(i.target).parents(".select").first().is(s) ? _hide() : "";
        });
      })
    })
  </script>

</head>

<body>

<div class="box">
  <div class="front">病床位置预定</div>
  <dl class="select">
    <dd>
      <ul>
        <div th:each="x:${xuanZuoVoList}">
          <p class="seatCharts-title " th:text="${x.bingFang.louCeng}"></p>
          <!--<li id="4_1" class="unavailable"><a href="#xzpos" row="4">1</a></li>-->
         <span  th:each="b:${x.bingFangList}" th:switch="${b.status == 2}">
           <li th:case="true" class="unavailable">
             <a  th:text="${b.fangJian}"></a>
           </li>
           <li th:case="false" style="background-color: #6bcbca">
             <input type="hidden" th:value="${b.id}" id="chuangWeiId">
             <a href="#xzpos"th:rows="${b.louCengNum}"  th:text="${b.fangJian}"></a>
           </li>
         </span>

        </div>


      </ul>
    </dd>
    <input type="hidden" id="cId">
    <dt>床位：
    </dt>
  </dl>
  <a name="xzpos" id="xzpos"></a>
  <input class="btn" style="background-color: #ff7544" onclick="confirmChaungWei()" value="确定床位" type="button">
  <div id="legend" class="seatCharts-legend">
    <ul class="seatCharts-legendList">
      <li class="seatCharts-legendItem">
        <div class="seatCharts-seat seatCharts-cell available"  style="background-color: #6bcbca"></div>
        <span class="seatCharts-legendDescription">可选座</span></li>
      <li class="seatCharts-legendItem">
        <div class="seatCharts-seat seatCharts-cell unavailable"></div>
        <span class="seatCharts-legendDescription">已预定</span></li>
    </ul>
  </div>
</div>
<script>
  function confirmChaungWei() {
    var id  = $("#cId").val();
    if (!id) {
      alert("该床位已经被预定！");
      return false;
    }
    $.ajax({
      url:'/comfirm/zuo',
      type:"POST",
      data:{
        id:id,
      },
      success: function (result) {
          alert(result.msg);
          return false;
      }
    })
  }
</script>
</body>
</html>
